<template>
  <div class="chosePositionBar">

    <div class="top">
      <div class="search-box">
        <van-search v-model="searchValue" placeholder="城市/区域/位置" shape="round" label="地址" @search="searchClick"
          @cancel="cancelClick" show-action clear-trigger="focus" />
      </div>
      <!-- show-action显示取消按钮 action-text取消按钮文字 -->
      <div class="cityBar">
        <!--v-model父子组件传值 van-tabs组件中props中有个active -->
        <van-tabs v-model:active="tabActive" color="#ff9854" line-height="2px">
          <template v-for="(value, keys, index) in cityAllData" :key="index">
            <!-- name 标签名称，作为匹配的标识符 作为标签的索引值 -->
            <van-tab :title="value.title" :name="keys">
            </van-tab>
          </template>
        </van-tabs>
      </div>
    </div>
    <div class=" content">
      <!--原始写法 每次切换发送请求 <hot-city-list :current-group="currentGroup"></hot-city-list> -->
      <template v-for="(value, key, index) in cityAllData" :key="index">
        <!-- key:{ cityGroup , hotCities } 优化两个tabBar切换延迟 -->
        <hot-city-list v-show="tabActive==key" :current-group="value"></hot-city-list>
      </template>

    </div>

  </div>
</template>

<script setup>
import hotCityList from './components/hotCityList.vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import useCityStore from "@/stores/modules/city"
import { storeToRefs } from 'pinia';
import { computed } from '@vue/reactivity';
const router = useRouter()
const searchValue = ref('')
// 点击回车或搜索按钮触发
const searchClick = (val) => {
  // 会直接拿到搜索框数据 val
  router.push(`/home?city=${val}`)
}
// 点击取消触发
const cancelClick = () => {
  searchValue.value = ''
  router.back()
}

// tab的切换
const tabActive = ref()
const cityStore = useCityStore()
cityStore.getCityDataAction()
const { cityAllData } = storeToRefs(cityStore)

// 获取选中标签后的数据
// 1.获取正确的key：将tabActive正确绑定
// 2.根据key从cityAllData获取数据，默认直接获取的数据不是响应式的，所以必须包裹computed
const currentGroup = computed(() => {
  return cityAllData.value[tabActive.value]
})
</script>

<style lang="less" scoped>
.chosePositionBar {
  // 全局滚动不符合
  // .top {
  //   position: fixed;
  //   top: 0;
  //   left: 0;
  //   right: 0;
  // }

  // 局部滚动
  .content {
    height: calc(100vh - 98px);
    overflow-y: auto;

  }
}
</style>